<template>
  <div>
    <!-- login -->
    <el-dialog :visible="showLogin" width="400px" :before-close="close">
      <span slot="title" class="dialog-footer">
        <b>登入</b>
      </span>
      <el-form :model="form">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input
            style="-webkit-user-select:text!important"
            v-model="form.userstring"
            autocomplete="off"
            placeholder="输入姓名或工牌号"
            autofocus
            @keyup.enter.native="login"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input
            style="-webkit-user-select:text!important"
            v-model="form.userpasswd"
            autocomplete="off"
            placeholder="输入密码"
            show-password
            @keyup.enter.native="login"
          ></el-input>
        </el-form-item>
        <el-alert
          v-if="loginStatus > 0"
          :title="errInfo"
          type="error"
          show-icon
          @close="loginStatus = -1"
        ></el-alert>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="close">取 消</el-button>
        <el-button round type="primary" @click="login">确 定</el-button>
      </span>
    </el-dialog>
    <!-- logout -->
    <el-dialog :visible="showLogout" width="300px" :before-close="close">
      <span slot="title" class="dialog-footer">
        <b>注销</b>
      </span>
      <p>
        确定要注销
        <b>
          <u>&emsp;{{ userName }}&emsp;</u> </b
        >吗？
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="close">取 消</el-button>
        <el-button round type="primary" @click="logout">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "loginView",
  data() {
    return {
      formLabelWidth: "3em",
      form: {
        userstring: "",
        userpasswd: "",
      },
      loginStatus: -1,
    };
  },
  computed: {
    showLogin() {
      return this.$store.state.login.status === -1;
    },
    showLogout() {
      return this.$store.state.login.status > -1;
    },
    userName() {
      if (!this.$store.state.login.userbase) return "";
      return this.$store.state.login.userbase.name;
    },
    errInfo() {
      if (this.loginStatus == -1) {
        return "";
      } else if (this.loginStatus == 1) {
        return "姓名或工牌号不存在";
      } else if (this.loginStatus == 2) {
        return "密码错误";
      } else if (this.loginStatus == 3) {
        return "该用户无权限登入";
      } else if (this.loginStatus == 4) {
        return "用户名或密码长度不够";
      } else {
        return "未知错误";
      }
    },
  },
  methods: {
    login() {
      if (this.form.userstring.length < 2 || this.form.userpasswd.length < 6) {
        this.loginStatus = 4;
        return null;
      }
      // this.$store.dispatch("login", this.form);
      console.log(JSON.stringify(this.form));
      this.axios
        .post("api/login/", this.form)
        .then((response) => {
          console.log(response.data);
          this.$store.commit("setResponse", response.data);
          this.loginStatus = response.data.status;
          if (response.data.status == 0) {
            this.$store.commit("setLogin", response.data);
            this.$store.dispatch("initialAction");
            this.setTimer();
            this.$notify.success({
              title: "登入成功",
              message: "用户 # " + response.data.userbase.name + " # 已登入",
            });
            if (this.$store.state.router.next != "") {
              this.$router.push(this.$store.state.router.next);
              this.$store.commit("setRouterNext", "");
            } else {
              this.$router.push("Dashboard/Concern");
            }
            this.close();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    logout() {
      this.$notify.info({
        title: "登出成功",
        message: "用户 # " + this.userName + " # 已注销",
      });
      this.clearTimer();
      this.$store.commit("resetLogin");
      this.$router.push("/");
      this.close();
    },
    close() {
      this.form.userstring = "";
      this.form.userpasswd = "";
      this.$emit("close");
    },
    handleClose() {
      this.cancel();
    },
    setTimer() {
      let self = this;
      let timer = setInterval(() => {
        self.$store.dispatch("initialAction");
      }, 1000 * 60);
      this.$store.commit("setTimer", timer);
    },
    clearTimer() {
      let timer = this.$store.state.deamonTimer;
      clearInterval(timer);
    },
  },
};
</script>
